<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<meta name="description" content="Vibes Tattoo Homepage" />
<meta name="keywords" content="Vibes Tattoo, Tattoo, Aarhus" />
<meta name="author" content="Patryk Miroslaw, Coco Lynge, Alex Iuga, Razvan Chiminit" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/anythingslider.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link type="text/css" href="css/jquery.ui.theme.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.core.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.slider.css" rel="stylesheet" />
<link rel="stylesheet" href="css/style-gallery.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="guestbook/styles.css" />
<title>Vibes Tattoo</title>
</head>
<body>
<div id="wrapper">
<header> <img src="img/dragon-mobile.png" alt="dragon-img" id="dragon-image"> <img src="img/logo.png" alt="logo" id="logo">
  <div class="clear"></div>
  <nav id="menu-home-list">
    <ul id="nav-list">
      <li class="slider-nav" ><a href="#1" class="slider-nav-a">Home</a></li>
      <li class="slider-nav"><a href="#2" class="slider-nav-a">Information</a></li>
      <li class="slider-nav"><a href="#3" class="slider-nav-a">About</a></li>
      <li class="slider-nav gallery-open"><a href="#4" class="slider-nav-a gallery-open">Gallery</a></li>
      <li class="slider-nav"><a href="#5" class="slider-nav-a">Guestbook</a></li>
    </ul>
  </nav>
</header>
<section id="asides">
  <aside id="opening-hours">
    <ul id="opening-hours-list">
      <li>Opening Hours</li>
      <li>Mon-Fri : 12:00 - 19:00</li>
      <li>Saturday: 11:00 - 14:00</li>
      <li>Sunday: Closed</li>
    </ul>
  </aside>
  <aside id="location">
    <ul id="location-list">
      <li>Location</li>
      <li>Banegårdsgade 36</li>
      <li>8000 Aarhus C</li>
      <li>&nbsp;</li>
    </ul>
  </aside>
  <div class="clear"></div>
  <aside id="phone-mail-aside">
    <ul id="phone-mail-list">
      <li><img src="img/icon-phone.png" alt="phone-icon"><span class="span-middle"><a href="tel:42584749"> 42 58  47 49</a></span></li>
      <li><img src="img/icon-mail.png" alt="mail-icon"><span class="span-middle"><a href="mailto:vibestattoo@yahoo.com" id="mail"> vibestattoo@yahoo.com</a></span></li>
    </ul>
  </aside>
  <aside id="fb-yt-aside">
    <ul id="fb-yt-list">
      <li><a href="http://www.youtube.com/watch?v=Dym2rezO5xw&list=PLOnol5tTIejtbqQF7-6WBxlbm1RaHB01i" target="_blank"><img src="img/icon-yt.png" alt="yt-icon"></a></li>
      <li><a href="https://www.facebook.com/vibestattoos" target="_blank"><img src="img/icon-fb.png" alt="fb-icon"></a></li>
    </ul>
  </aside>
  <div class="clear"></div>
</section>
<section id="main-sect">
  <ul id="slider-content">
    <!-- START HOME PAGE -->
    <li id="slider-main">
      <section id="asides-mobile">
        <aside id="opening-hours">
          <ul id="opening-hours-list">
            <li>Opening Hours</li>
            <li>Mon-Fri : 12:00 - 19:00</li>
            <li>Saturday: 11:00 - 14:00</li>
            <li>Sunday: Closed</li>
          </ul>
        </aside>
        <aside id="location">
          <ul id="location-list">
            <li>Location</li>
            <li>Banegårdsgade 36</li>
            <li>8000 Aarhus C</li>
            <li>&nbsp;</li>
          </ul>
        </aside>
        <div class="clear"></div>
        <aside id="phone-mail-aside">
          <ul id="phone-mail-list">
            <li><img src="img/icon-phone.png" alt="phone-icon"><span class="span-middle"><a href="tel:42584749"> 42 58  47 49</a></span></li>
            <li><img src="img/icon-mail.png" alt="mail-icon"><span class="span-middle"><a href="mailto:vibestattoo@yahoo.com"> vibestattoo@yahoo.com</a></span></li>
          </ul>
        </aside>
        <aside id="fb-yt-aside">
          <ul id="fb-yt-list">
            <li><a href="http://www.youtube.com/watch?v=Dym2rezO5xw&list=PLOnol5tTIejtbqQF7-6WBxlbm1RaHB01i" target="_blank"><img src="img/icon-yt.png" alt="yt-icon"></a></li>
            <li><a href="https://www.facebook.com/vibestattoos" target="_blank"><img src="img/icon-fb.png" alt="fb-icon"></a></li>
          </ul>
        </aside>
        <div class="clear"></div>
      </section>
      <nav id="menu-home-list-mobile">
        <ul id="nav-list">
          <li class="slider-nav"><a href="#2" class="slider-nav-a">
            <p class="nav-top">Information</p>
            <p class="nav-desc">Description</p>
            <img src="img/arrow-right.png" alt="arrow" class="nav-arrow"></a></li>
          <li class="slider-nav"><a href="#3" class="slider-nav-a">
            <p class="nav-top">About</p>
            <p class="nav-desc">Description</p>
            <img src="img/arrow-right.png" alt="arrow" class="nav-arrow"></a></li>
          <li class="slider-nav gallery-open"><a href="#4" class="slider-nav-a gallery-open">
            <p class="nav-top">Gallery</p>
            <p class="nav-desc">Description</p>
            <img src="img/arrow-right.png" alt="arrow" class="nav-arrow"></a></li>
          <li class="slider-nav"><a href="#5" class="slider-nav-a">
            <p class="nav-top">Guestbook</p>
            <p class="nav-desc">Description</p>
            <img src="img/arrow-right.png" alt="arrow" class="nav-arrow"></a></li>
        </ul>
      </nav>
      <section id="homepage-content"> CONTENT FOR TABLET/DESKTOP </section>
    </li>
    <!-- END HOME PAGE --> 
    <!-- START INFORMATION PAGE -->
    <li>
      <section id="sect-info"> <span class="content-span slider-nav"> <a href="#1" class="slider-nav-a"><img src="img/arrow-leftc.png" alt="arrow"></a> Information</span>
        <h1>CONTENT</h1>
      </section>
    </li>
    <!-- END INFORMATION PAGE--> 
    <!-- START ABOUT PAGE-->
    <li>
      <section id="sect-about"> <span class="content-span slider-nav"> <a href="#1" class="slider-nav-a"><img src="img/arrow-leftc.png" alt="arrow"></a> About</span>
        <p>CONTENT</p>
      </section>
    </li>
    <!-- END ABOUT PAGE--> 
    <!-- START GALLERY PAGE-->
    <li>
      <section id="sect-gallery"> <span class="content-span slider-nav"> <a href="#1" class="slider-nav-a"><img src="img/arrow-leftc.png" alt="arrow"></a> Gallery</span>
        <p>CONTENT</p>
        <div id="fp_gallery" class="fp_gallery">
          <ul id="fp_galleryList" class="fp_galleryList">
            <li>x</li>
          </ul>
          <div id="fp_thumbContainer">
            <div id="fp_thumbScroller">
              <div class="container">
                <?php include('gallery-img-writer.php'); ?>
              </div>
            </div>
          </div>
          <div id="fp_scrollWrapper" class="fp_scrollWrapper"> <span id="fp_prev_thumb" class="fp_prev_thumb"></span>
            <div id="slider" class="slider"></div>
            <span id="fp_next_thumb" class="fp_next_thumb"></span> </div>
          <div id="fp_overlay" class="fp_overlay"></div>
          <div id="fp_loading" class="fp_loading"></div>
          <div id="fp_next" class="fp_next"></div>
          <div id="fp_prev" class="fp_prev"></div>
          <div id="fp_close" class="fp_close">Close preview</div>
        </div>
      </section>
    </li>
    <!-- END GALLERY PAGE--> 
    <!-- START GUESTBOOK PAGE-->
    <li>
      <section id="sect-guestbook"> <span class="content-span slider-nav"> <a href="#1" class="slider-nav-a"><img src="img/arrow-leftc.png" alt="arrow"></a> Guestbook</span>
        <?php
		  include ('guestbook/connect.php');
          include ('guestbook/comment.class.php');
          $comments = array();
		  $sql = "SELECT * FROM comments ORDER BY id ASC";
          $result = mysql_query($sql);
		  if (!$result) {
   				 echo "Could not successfully run query ($sql) from DB: " . mysql_error();
    			exit;
			}

			if (mysql_num_rows($result) == 0) {
   			 echo "No rows found, nothing to print so am exiting";
    		exit;
			}


          while($row = mysql_fetch_assoc($result))
          {
              $comments[] = new Comment($row);
          }
			mysql_free_result($result);
          ?>
        <div id="main">
          <div id="comment-wrapp">
            <div class="insetcommenthere"></div>
            <?php
              foreach($comments as $c){
                  echo $c->markup();
              }
              ?>
          </div>
          <div id="addCommentContainer">
            <p>Leave a review</p>
            <form id="addCommentForm" method="post" action="">
              <div>
                <label for="name">Your Name</label>
                <input type="text" name="name" id="name" />
                <label for="email">Your Email</label>
                <input type="text" name="email" id="email" />
                <label for="body">Your Comment</label>
                <textarea name="body" id="body" cols="20" rows="5"></textarea>
                <input type="submit" id="submit" value="Submit" />
              </div>
            </form>
          </div>
        </div>
      </section>
    </li>
    <!-- END GUESTBOOK PAGE-->
  </ul>
</section>
<!-- JS --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/jquery.anythingslider.js"></script> 
<script type="text/javascript" src="js/custom.js"></script> 
<script type="text/javascript" src="js/gallery.js"></script> 
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script> 
<!-- END JS -->
</body>
</html>